<template>
  <div class="publish-container">
    <h1 class="page-title">写评论</h1>
    <div class="movie-info" v-if="movieData.title">
      <img :src="movieData.cover_url" alt="" class="info-img">
      <div class="right-info">
        <div class="title">{{ movieData.title }}</div>
        <div class="desc">
          导演 {{ movieData.directors[0].name }} 主演 {{ movieData.actors[0].name + ' / ' + movieData.actors[1].name }}
          {{ movieData.countries.join(' / ') }} / {{ movieData.rating.value }}分 ({{ movieData.comment_count }}人评价)
        </div>
      </div>
    </div>

    <div class="score-add">
      <div>给个评价吧：</div>
      <div class="rankstar">
        <div :class="['star-item', item.state]" v-for="(item, index) in starlist.list || []" :key="index"
             @mouseenter="changeScore(index)"></div>
      </div>
      {{ review }}
    </div>

    <div class="text-input">
      <textarea name="" id="commentInput" placeholder="写评论" v-model.trim="content"></textarea>
    </div>

    <div id="submitBtn" @click="submit">提交</div>
  </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import moment from 'moment'
import {useStore} from 'vuex'
import DoubanApi from "@/api/douban";

const store = useStore()
const route = useRoute()
const router = useRouter()

const movieData = ref({})
const content = ref('')

const starlist = reactive({
  list: new Array(5).fill({state: 'normal'})
})

const id = computed(() => route.query.id)

onMounted(async () => {
  await DoubanApi.getMovieDetail(id.value).then(res => {
    movieData.value = res
  })
})

// 评分
const review = computed(() => {
  const fullStars = starlist.list.filter(item => item.state === 'full').length
  switch (fullStars) {
    case 1:
      return '很差'
    case 2:
      return '较差'
    case 3:
      return '还行'
    case 4:
      return '推荐'
    case 5:
      return '力荐'
    default:
      return ''
  }
})

const changeScore = (index) => {
  const list = []

  starlist.list.forEach((item, _index) => {
    if (_index <= index) {
      item.state = 'full'
    } else {
      item.state = 'normal'
    }

    list.push({...item})
  })

  starlist.list = list
}

const userInfo = computed(() => store.state.userInfo)

const submit = () => {
  let count = 0
  starlist.list.forEach((item) => {
    if (item.state === 'full') {
      count++
    }
  })
  store.commit('setCommentList', {
    rating: {
      value: count * 2
    },
    user: {
      avatar: userInfo.value.avatar,
      name: userInfo.value.nickname
    },
    create_time: moment().format('YYYY-MM-DD HH:mm:ss'),
    abstract: content.value
  })

  router.push('/detail?id=' + movieData.value.id)
}
</script>


<style lang="less" scoped>
.publish-container {

  width: 590px;
  margin: 0 auto;
}

.page-title {
  font-size: 14px;
  margin-top: 5px;
  color: #007722;
}

.movie-info {
  display: flex;
  width: 590px;
  height: 62px;
  margin: 0 auto;
  margin-top: 10px;
  background-color: #f8f8f8;
  overflow: hidden;
}

.info-img {
  width: 48px;
  height: 62px;
  margin-right: 15px;
}

.right-info {
  padding: 10px 40px 0 0;
  margin-bottom: 5px;

  .title {
    color: #37a;
    font-size: 14px;
    line-height: 1.4;
  }

  .desc {
    margin-top: 2px;
    color: #999;
  }
}

.rankstar {
  display: flex;
  align-items: center;
}

.score-star {
  margin-left: 10px;
  padding-top: 5px;

  .rankstar {
    transform: scale(1.3);
    transform-origin: 0 0;
  }
}


.star-item {
  width: 16px;
  height: 16px;
  background-size: cover;
  cursor: pointer;

  &.normal {
    background-image: url('/imgs/star.png');
  }

  &.full {
    background-image: url('/imgs/star-fill.png');
  }
}

.score-add {
  margin-top: 30px;
  display: flex;
}

.text-input {
  margin-top: 20px;
}

#commentInput {
  outline: none;
  border: none;
  border-top: 1px solid #ddd;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 16px 10px;
  width: 100%;
  min-height: 400px;
  overflow: auto;
  font-size: 14px;
}

#submitBtn {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #3db04d;
  width: 28px;
  cursor: pointer;
}

</style>